<template>
	<view class="container">
		<view class="header">
			<view class="header_t flex_v_c">
				<view class="year">
					{{params.year}}年
				</view>
				<view class="type">
					支出
				</view>
			</view>
			<view class="header_b flex_v_c">
				<view class="month" @click="datetimeShow=true">
					{{params.month}}月
					<u-icon name="arrow-down-fill" color="#fff" size="14"></u-icon>
				</view>
				<view class="money">
					<u-count-to :startVal="0" :endVal="allTotal" color="#fff" :decimals="2" separator=","></u-count-to>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: scrollHeight-safeAreaHeight - 150 + 'px' }" class="list_content">
			<view class="list_item" v-for="(item,index) in list" :key="index">
				<view class="item_t">
					<view>{{item.month}}月{{item.day}}日</view>
					<view>支出：{{item.total}}元</view>
				</view>
				<view class="item_content">
					<view v-for="(v,i) in item.list" :key="i" class="list">
						<image :src="'https://mp-fff067d4-0ad0-46f1-8940-3076faaf2173.cdn.bspapp.com/image/static/' + v.type + '.png'" mode=""></image>
						<view class="list_r">
							<view class="title">
								{{v.remark}}
							</view>
							<view class="list_money">
								-{{v.money}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="foot">
			<u-button throttleTime="1000" type="primary" shape="circle" color="#3585F7" text="新 增" @click="goAdd"></u-button>
		</view>
		<u-datetime-picker :show="datetimeShow" ref="datetimePicker" :formatter="formatter" v-model="time" mode="year-month" @cancel="datetimeShow=false" @confirm="dateTimeConfirm"></u-datetime-picker>
	</view>
</template>

<script>
import { navigateTo,getStorageSync } from "@/static/utils";
import { systemInfo } from "@/mixins/system.js";
	export default {
		data() {
			return {
				datetimeShow:false,
				time:Number(new Date()),
				params:{
					year:new Date().getFullYear(),
					month:"",
					userId:getStorageSync('userInfo')._id
				},
				list:[]
			};
		},
		mixins: [systemInfo],
		onLoad() {
			this.params.month = uni.$u.timeFormat(new Date().getTime(),'mm')
		},
		onShow() {
			this.getList()
		},
		computed:{
			allTotal(){
				let total = 0
				this.list.forEach(v=>{
					total+= parseFloat(v.total)
				})
				return total
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods:{
			getList(){
				let that = this
				uni.request({
					url:"https://fc-mp-fff067d4-0ad0-46f1-8940-3076faaf2173.next.bspapp.com/getBookKeepList",
					data:that.params,
					success(res) {
						if (res.data.code == 200) {
							res.data.data.forEach(item=>{
								if (item.list.constructor!==Array) {
									item.list = JSON.parse(item.list)
								}
								item.total = 0
								item.list.forEach(v=>{
									item.total += parseFloat(v.money)
								})
							})
							that.list = res.data.data
							console.log(that.list);
						}else{
							that.list = []
							uni.$u.toast(res.data.mesg)
						}
					}
				})
			},
			goAdd(){
				navigateTo('games/bookkeeping/addInfo')
			},
			formatter(type, value) {
				if (type === 'year') {
						return `${value}年`
				}
				if (type === 'month') {
						return `${value}月`
				}
				return value
			},
			async dateTimeConfirm(e){
				const timeFormat = uni.$u.timeFormat;
				this.params.year = await timeFormat(e.value, 'yyyy');
				this.params.month = await timeFormat(e.value, 'mm');
				this.datetimeShow = false
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
.container{
	width: 100vw;
	height: 100vh;
	background: #f9f9f9;
	.flex_v_c{
		display: flex;
		align-items: center;
	}
	.list_content{
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		.list_item{
			width: 100%;
			background: #fff;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.09);
			margin-bottom: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			.item_t{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #666;
				font-size: 26rpx;
			}
			.item_content{
				padding-top: 10rpx;
				.list{
					display: flex;
					align-items: center;
					padding: 10rpx 0;
				}
				image{
					width: 40rpx;
					height: 40rpx;
				}
				.list_r{
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
	.header{
		width: 100%;
		height: 200rpx;
		background: linear-gradient(#007aff,#fff);
		padding: 20rpx;
		box-sizing: border-box;
		.header_t{
			width: 100%;
			font-size: 24rpx;
			color: #eee;
			.year{
				width: 200rpx;
			}
		}
		.month{
			width: 200rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
		}
	}
	.foot{
		width: 100%;
		height: 50px;
		background: #fff;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
}
</style>
